<template>
  <div class="page meetingSubscribe">
    <van-nav-bar left-arrow @click-left="onClickBack" title="会议室预约详情" fixed class="my-nav-bar2" />
    <van-form label-width="100px" style="margin-top: 46px;" class="form">
      <van-cell-group style="background-color:#ffffff00">
        <div class="card">
          <van-field readonly v-model="formData.orderOrgName" name="orderOrgName" label="申请单位" placeholder="请选择申请单位"
            :rules="[{ required: true }]" required />

          <van-field readonly v-model="formData.meetTitle" name="meetTitle" label="会议名称" placeholder="请选择会议名称"
            :rules="[{ required: true }]" required />
        </div>
        <div class="card">
          <van-field readonly name="orderDate" label="会议时间" :value="formData.orderDate" placeholder="请选择日期" />
          <van-field readonly v-model="formData.meetPersons" name="meetPersons" label="参会人数" placeholder="请输入参会人数(整数)"
            type="digit" />

          <van-field :value="formData.meetType" name="meetType" label="会议类型" placeholder="请选择会议类型" readonly />
        </div>
        <div class="card">
          <van-field required v-model="formData.meettingTitle" name="meettingTitle" label="会议主题" placeholder=" 请输入会议主题"
            :rules="[{ required: true, message: '请输入会议主题' }]" readonly />
          <van-field required v-model="formData.meetItems" name="meetItems" label="物品需求" placeholder="请选择物品需求"
            :rules="[{ required: true, message: '请输入物品需求' }]" readonly />

          <van-field readonly v-model="formData.meetOthers" name="meetOthers" label="其他需求" placeholder="请输入其他需求" />
          <van-field required v-model="formData.meetManager" name="meetManager" label="会议负责人" placeholder="请选择会议负责人"
            :rules="[{ required: true, message: '请输入会议负责人' }]" readonly />
          <van-field readonly required v-model="formData.meetManagerPhone" name="meetManagerPhone" label="负责人联系方式"
            placeholder="请输入负责人联系方式" :rules="[{ required: true }]" />

          <van-field name="meetFiles" label="会议附件(word/pdf):" readonly>
            <template #input>
              <van-uploader v-model="formData.meetFiles" readonly :deletable="false" />
            </template>
          </van-field>
          <van-field readonly v-model="formData.meetStatusName" name="meetStatusName" label="审核状态"
            placeholder="请输入审核状态" />
        </div>
      </van-cell-group>

      <van-button type="info" class="btn" block round @click="onClickBack">返回</van-button>
    </van-form>
  </div>
</template>
<script>
import { fileShowUrl } from "@/utils/Axios";
export default {
  name: "meetingSubscribe",
  data() {
    return {
      showPickerDate: false,
      showPickerOrderOrgName: false,
      showPickerMeettingType: false,
      showPickerThingDemand: false,
      showPickerChargePerson: false,
      activeIndex: null, //申请单位选中的索引
      formData: {
        meetTitle: '',
        orderOrgName: '',
        orderUserId: "",
        meetPersons: '',
        meetType: '',
        meetTypeId: '',
        meettingTitle: '',
        meetItems: '',
        meetItemsId: '',
        meetOthers: '',
        meetManager: '',
        meetManagerId: "",
        meetManagerPhone: "",
        orderDate: "",
        sysOrgCode: "",
        meetRoomId: "",
        meetFiles: [],
        meetStatusName:""
      },
      roomListTime: [],
      meetTypeOption: [], // 会议类型
      orderOrgNameOption: [], // 申请单位
      thingDemandOption: [], // 物品需求
      chargePersonOption: [], // 会议负责人
      meetData: {},
      startTime: "",
      endTime: "",
    }
  },
  mounted() {
    this.$axios({
      url: "/roomOrder/queryById?id=1955086444812333056"
      // url: "/roomOrder/queryById?id=" + this.$route.query.meetId
    }).then(res => { 
      console.log(res);
      this.formData = {
        ...res,
        meetStatusName: res.meetStatus === "1" ? "审核同意" : res.meetStatus === "2" ? "审核驳回" : "待审核",
        meetFiles: res.meetFiles.split(",").map(item => ({ url: fileShowUrl + item })),
        orderDate: `${this.$dayjs(res.orderStartTime).format("YYYY-MM-DD hh:mm")} - ${this.$dayjs(res.orderEndTime).format("hh:mm")}`
      }
   })
   
  },
  methods: {
    onClickBack() {
      this.$router.push({
        path: "/subscribeList",
        params: {
          active: this.$route.query.active
        }
      });
    },
   
  }
}
</script>
<style scoped lang="less">
.meetingSubscribe {
  padding-top: 2px;
  background: linear-gradient(115deg, #F7FAFF 0%, #B8D3FA 85%, #DCE9FD 100%);
  backdrop-filter: blur(0px);
  padding-bottom: 40px;
  overflow: hidden;

  .my-nav-bar2 {
    background-color: transparent;
  }

  .form {
    padding: 10px 15px 15px;
    height: calc(100% - 11px);
    overflow: auto;

    .card {
      padding: 10px;
      background: #fff;
      border-radius: 10px;
      width: 100%;
      /* 重要 */
      overflow-x: auto;
      margin-bottom: 10px;
    }

    .btn {
      margin: 20px 0;
    }
  }

}
</style>